.account-component {
  position: relative;
  overflow: hidden;
  width: 100%;
}

.account-background {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;

  width: 100%;
  height: 100%;

  opacity: 0.6;
  filter: blur(8px);
}

.account-content {
  position: relative;
  z-index: 2;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  padding: 10px 16px;
}

.account-logo {
  width: 200rpx;
  max-width: 150px;
  height: 200rpx;
  max-height: 150px;
}

.account-name {
  margin: 4px 0;
  font-size: 20px;
  text-shadow: 0 0 1px var(--grey);
}

.account-detail {
  max-width: 80%;
  margin: 4px auto;
  color: var(--grey3);
  font-size: 14px;
}

.account-action-list {
  display: flex;
  justify-content: space-evenly;
}

.account-action {
  overflow: hidden;

  box-sizing: content-box;
  width: 24px;
  height: 24px;
  margin: 6px;
  padding: 8px;
  border-radius: 50%;

  background-color: var(--bg-color);

  .icon {
    width: 24px;
    height: 24px;
  }
}

.button-hover {
  background-color: var(--bg-hover) !important;
}
